/************* Reset CSS *************/
/* 清除内外边距 */
html,body,h1,h2,h3,h4,h5,h6,hr,p,blockquote, /* structural elements 结构元素 */
dl,dt,dd,ul,ol,li, /* list elements 列表元素 */
pre, /* text formatting elements 文本格式元素 */
form,fieldset,iframe,lengend,label,button,input,textarea, /* form elements 表单元素 */
th,td { /* table elements 表格元素 */ margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6 { font-size: 100%; }
address,cite,dfn,var { font-style: normal; } /* 将斜体扶正 */
code,kbd,pre,samp,tt { font-family: "Courier New", Courier, monospace; } /* 统一等宽字体 */
small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
/* 重置列表元素 */
ul,ol { list-style: none; }
/* 重置文本格式元素 */
i,b,em{ font-style:normal;}
a { text-decoration: none; }
a:hover { text-decoration: none; }
/* 重置表单元素 */
legend { color: #000; } /* for ie6 */
fieldset,img,button { border: none; }
/* 注：optgroup 无法扶正 */
button,input,select,textarea { font-size: 100%; /* 使得表单元素在 ie 下能继承字体大小 */ }
img,iframe,table,form { vertical-align: top; }
/* 重置表格元素 */
table { border-collapse: collapse; border-spacing: 0; }
/* 重置 hr */
hr { border: none; height: 1px; }
/*页面滑动流畅*/
html,body{ -webkit-overflow-scrolling:touch; -webkit-user-select:none; user-select:none; height:100%;}

body { color:#34495e; font:14px/24px "microsoft yahei"; overflow:hidden;}

/*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
.scrollbar::-webkit-scrollbar{
    width: 5px;
}
/*定义滚动条的轨道，内阴影及圆角*/
.scrollbar::-webkit-scrollbar-track{
    border-radius: 10px;
    background-color: #f3f3f3;
}
/*定义滑块，内阴影及圆角*/
.scrollbar::-webkit-scrollbar-thumb{
    border-radius: 10px;
    background-color: #555;
}

.container{ height:462px; position:absolute; left:10px; top:10px; right:10px; overflow:hidden;}
.container.finish .uploader{ height:98px;}

.uploader{ height:460px; border:1px dashed #888aa0; background:#c8cadc; border-radius:15px; margin-bottom:15px; position:relative; -webkit-app-region:drag;}
.uploader::before{ content:""; width:100%; height:30%; background:url(../images/icon_upload.png) no-repeat center center; background-size:contain; position:absolute; left:50%; top:40%; transform:translate(-50%, -50%);}
.uploader p{ width:80%; height:24px; text-align:center; position:absolute; left:50%; top:65%; transform:translate(-50%, -50%);}

.font-list{ height:345px; overflow-x:hidden; overflow-y:auto;}
.font-list ul{ padding:20px 0;}
.font-list li{ height:60px; border-bottom:1px dashed #888aa0; position:relative; margin-right:5px;}
.font-list li:hover .btn{ opacity:1;}
.font-list .img{ float:left; width:20%; height:50px; background-position:center center; background-repeat:no-repeat; background-size:contain; margin-top:5px;}
.font-list .letter{ float:left; width:40px; height:40px; line-height:40px; text-align:center; font-size:30px; font-weight:bold; background:url(../images/icon_grid.png) no-repeat center center; position:relative; margin:10px 0 0 10px;}
.font-list .btn.del{ width:36px; height:26px; background:url(../images/icon_del_normal.png) no-repeat center center; background-size:contain; position:absolute; right:0; top:17px; opacity:0; cursor:pointer; transition:all linear .2s;}
.font-list .btn.del:hover{ background-image:url(../images/icon_del_hover.png);}

.footer{ background:#fff; padding:0 10px 10px; position:absolute; left:0; right:0; bottom:0;}
.footer .btn.deleteall{ position:absolute; right:20px; top:0; cursor:pointer;}
.footer .btn.publish{ float:right; width:60%; height:68px; line-height:68px; text-indent:80px; font-size:20px; font-weight:bold; border-radius:5px; background:#dedede url(../images/icon_publish.png) 5% center no-repeat; background-size:35%; margin-top:4px; cursor:pointer; transition:all linear .2s;}
.footer .btn.publish:hover{ color:#fff; background-color:#1abc9c;}
.footer .spacing_wrap{ width:35%; text-align:center; position:absolute; left:50%; top:0; transform:translate(-50%, 0);}
.footer .spacing_wrap .spacing{ display:inline; width:50%; text-align:center; border:none; border-bottom:1px solid #ccc; outline:none;}
.footer .font_type_wrap{ float:left; width:40%;}
.footer .font_type_wrap label{ display:block; font-size:12px;}
.footer .font_type_wrap input[type="radio"]{ vertical-align:middle;}